<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>table</title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    body {
        text-align: center;
    }

    table {
        width: 600px;
        margin: 0px auto;
    }
    </style>
</head>

<body>
    <button id="add">添加</button>
    <button id="del">删除</button>
    <table border="1" cellpadding="2" cellspacing="0" id='myTab'>
        <caption>table title and/or explanatory text</caption>
        <thead>
            <tr>
                <th>header</th>
                <th>header</th>
                <th>header</th>
                <th>header</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>data3</td>
                <td>data3</td>
                <td>data3</td>
                <td>data3</td>
            </tr>
            <tr>
                <td>data4</td>
                <td>data4</td>
                <td>data4</td>
                <td>data4</td>
            </tr>
        </tbody>
    </table>
	<script src="jquery.js"></script>
    <script type="text/javascript">
	$.ajax({
		url:"http://127.0.0.1:8080/homework/user/login",
		method:"post",
		data:{
			username:"lisi",
			passwd:"lisi"
		},
		sucess:function(res){
			connsole.log(res);
		},
		error:function(error){
			console.log(error);
		}
	})
    window.onload = function() {
        var index = 0;
        var trEle;
        document.getElementById("myTab").addEventListener('click', function(e) {
            var ev = e || window.event;
            index = ev.target.parentNode.rowIndex; //要删除的行号
            trEle = e.target.parentNode; //要删除的节点

            var p = trEle.parentNode.children;
            for (var i = 0, pl = p.length; i < pl; i++) {
                if (p[i] != trEle){
                	p[i].style.backgroundColor = "white";
                }else{
                	ev.target.parentNode.style.backgroundColor = "lightgrey";
                }
            }
        });
        // 按行号删除
        // document.getElementById("del").addEventListener('click', function(e) {
        //     if (index == 0) {
        //         alert("请选择删除行");
        //     } else {
        //         document.getElementById("myTab").deleteRow(index)
        //     }
        // });
        // 按节点删除
        document.getElementById("del").addEventListener('click', function(e) {
            if (index == 0) {
                alert("请选择删除行");
            } else {
                document.getElementById("tb").removeChild(trEle);
            }
        });

        document.getElementById("add").addEventListener('click',function(e){
           var newTr = document.getElementById("myTab").insertRow(index+1);
           newTr.innerHTML='<td>新增01</td><td>新增02</td><td>新增03</td><td>新增04</td>';
        })

        var trEle = document.querySelectorAll("tbody tr");
        console.log("tr: ",trEle);
        for(var i = 0;i<trEle.length;i++){
            trEle[i].addEventListener('click',function(e){
                console.log(this)
            });
        }

        console.log("document.getElementById('myTab'): ",document.getElementById("myTab").rows)
    }
    </script>
</body>

</html>